<template>
  <div class="yuyue">
    <!-- 标题头 -->
    <mt-header title="约苗" class="mt-header">
      <mt-button slot="left" @click="show = true" style="margin-top: 10px">
        <img
          src="../assets/souye/weizhi.png"
          style="width: 25px; height: 25px"
        />
        <span>{{ city }}</span>
      </mt-button>
    </mt-header>
    <!-- 地区选择 -->
    <div class="span">请选择接种点:</div>
    <Dq></Dq>
    <!-- 日期选择 -->
    <div class="span">请选择要预约时间:</div>
    <Rl></Rl>
    <!-- 接种人基本信息 -->
    <div class="span">接种人信息:</div>
    <Xx></Xx>
    <!-- 单选框 -->
    <div class="span">疫苗选择:</div>
    <Ymradio></Ymradio>
    <!-- 按钮 -->
    <van-button
      style="margin: 30px 0 100px 0"
      size="large"
      class="button"
      @click="changbtn"
      type="primary"
      >提交</van-button
    >

    <!-- 底部选择卡 -->
    <van-tabbar
      v-model="active"
      style="margin-top: 150px"
      class="my_van_tabbar"
      active-color="#4fc08d"
      inactive-color="#000"
      route
    >
      <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/yuyue" icon="location-o">预约</van-tabbar-item>
      <van-tabbar-item to="/kepu" icon="newspaper-o">科普</van-tabbar-item>
      <van-tabbar-item to="/me" icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 地址弹出 -->
    <van-action-sheet></van-action-sheet>
  </div>
</template>

<script>
//组件封装
import Ymradio from "../components/Yuyue/Yimiao";
import Dq from "../components/Yuyue/Diqu";
import Rl from "../components/Yuyue/Rili";
import Xx from "../components/Yuyue/Jiezhong";

export default {
  components: { Ymradio, Dq, Rl, Xx },
  data() {
    return {
      active: 1,
      // 监听是否登陆
      isLogin: false,
      //地址城市
      city: "济南市",
      //arr:[],
    };
  },
  methods: {
    cs(picker) {
      console.log(picker);
      console.log(picker[1].name);
      this.city = picker[1].name;
      this.show = false;
    },
    // 按钮提交验证
    changbtn() {
      // 数据处理
      let dq = this.$store.state.arrdq.slice(-1);
      let rl = this.$store.state.arrrl.slice(-1);
      let xxname = this.$store.state.arrjzName.slice(-1);
      let xxphone = this.$store.state.arrjzPhone.slice(-1);
      let xxsex = this.$store.state.arrjzSex.slice(-1);
      let ym = this.$store.state.arrym.slice(-1);
      let arr = this.$store.state.arr;
      //console.log(ym)

      // 点击弹窗
      this.$dialog({
        title: "疫苗预约",
        content: "是否确认信息开始预约",
        closeBtn: true, //显式右上角关闭按钮
        onOkBtn(event) {
          //确定按钮点击事件
          this.close(); //关闭对话框
          // 点击确定 执行语句
          arr.push(dq, rl, xxname, xxphone, xxsex, ym);
          let newArr = [].concat.apply([], arr);
          if (newArr.length === 6) {
            let param = `diqu=${newArr[0]}&rili=${newArr[1]}&yname=${newArr[2]}&phone=${newArr[3]}&sex=${newArr[4]}&yimiao=${newArr[5]}`;
            this.axios.post("/yuyue", param).then((result) => {
              if (result.data.code == 200) {
                this.$toast.success("预约成功！");
                arr.length = 0;
                // 刷新页面
                window.location.reload();
              }
            });
            //console.log(newArr);
          } else {
            this.$toast.fail("信息有误为了信息的安全,请重新填写！");
            //arr.length = 0
            window.location.reload();
          }
        },
        onCancelBtn(event) {
          //取消按钮点击事件，默认行为关闭对话框
          //return false;  //阻止默认“关闭对话框”的行为
        },
        onCloseBtn(event) {
          //右上角关闭按钮点击事件
          //return false;  //阻止默认“关闭对话框”的行为
        },
        closeCallback(target) {
          arr.length = 0;
          // alert("will close");  //对话框关闭回调函数，无论通过何种方式关闭都会触发
        },
      });
    },
  },
  // 路由守卫 监听是否登陆
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (sessionStorage.getItem("islogin") == 1) {
        next();
      } else {
        vm.$dialog({
          title: "预约请先登录!",
          content: "是否跳转到登录页面?",
          onOkBtn(event) {
            //确定按钮点击事件
            this.close(); //关闭对话框
            window.location.href = "/login";
          },
          onCancelBtn(event) {
            //取消按钮点击事件，默认行为关闭对话框
            //return false;  //阻止默认“关闭对话框”的行为
            window.location.href = "/";
          },
        });
      }
    });
  },
};
</script>

<style>
.van-button::before {
  width: 0;
}
/* 顶部标题颜色 */
.yuyue .mt-header {
  background-color: #4fc08d;
}
.span {
  font-size: 15px;
  margin-top: 13px;
  color: #000;
  margin-bottom: 5px;
  font-family: 微软雅黑;
  font-weight: bolder;
  margin-left: 8px;
}

.nut-textinput-label {
  margin-left: 5px;
}
.sex {
  margin-left: 100px;
}
.span_sex {
  margin-left: 5px;
}
.radios {
  margin-top: 10px;
  margin-left: 90px;
}
.van-radio--horizontal {
  margin-right: 50px;
}
</style>